<template>
  <el-card class="box-card">
    <div>
      <p class="title">销售统计</p>
      <div class="saleBox" :model="salesData">
        <div class="up">
          <div>
            <p class="yuan">今日交易额（元）</p>
            <p class="money">{{ salesData.todaySum }}</p>
          </div>
          <div>
            <p class="yuan">本月交易额（元）</p>
            <p class="money">{{ salesData.monthSum }}</p>
          </div>
          <div>
            <p class="yuan">本年交易额（元）</p>
            <p class="money">{{ salesData.yearSum }}</p>
          </div>
        </div>
        <div class="down">
          <div>
            <p class="yuan">今日交易量（笔）</p>
            <p class="money">{{ salesData.todayCount }}</p>
          </div>
          <div>
            <p class="yuan">本月交易量（笔）</p>
            <p class="money">{{ salesData.monthCount }}</p>
          </div>
          <div>
            <p class="yuan">本年交易量（笔）</p>
            <p class="money">{{ salesData.yearCount }}</p>
          </div>
        </div>
      </div>
    </div>
    <div>
      <p class="title">月交易统计</p>
      <div class="one">
        <div class="month" v-for="(item, index) in tableData" :key="index">
          <div class="leftBox">{{ item.m }}</div>
          <div class="centerBox">
            <p>交易额（元）</p>
            <p class="counts">{{ item.order_amount }}</p>
            <p>
              占比:<span style="color: rgba(249, 100, 34, 1)"
                >{{ item.order_amount_ratio }}%</span
              >
            </p>
          </div>
          <div class="rightBox">
            <p>交易量（笔）</p>
            <p class="counts">{{ item.count }}</p>
            <p>
              占比:<span style="color: rgba(249, 100, 34, 1)"
                >{{ item.count_ratio }}%</span
              >
            </p>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script>
import { getZiChan, getAssetOverview } from "../../../../utils/main";
export default {
  data() {
    return {
      token: sessionStorage.getItem("token"),
      salesData: {
        todaySum: "",
        todayCount: "",
        monthSum: "",
        monthCount: "",
        yearSum: "",
        yearCount: "",
      },

      tableData: [
        // {
        //   month: 1,
        //   money: 1789.0,
        //   moneybi: "10%",
        //   count: 200,
        //   countbi: "16%",
        // },
        // {
        //   month: 1,
        //   money: 1789.0,
        //   moneybi: "10%",
        //   count: 200,
        //   countbi: "16%",
        // },
        // {
        //   month: 1,
        //   money: 1789.0,
        //   moneybi: "10%",
        //   count: 200,
        //   countbi: "16%",
        // },
        // {
        //   month: 1,
        //   money: 1789.0,
        //   moneybi: "10%",
        //   count: 200,
        //   countbi: "16%",
        // },
        // {
        //   month: 1,
        //   money: 1789.0,
        //   moneybi: "10%",
        //   count: 200,
        //   countbi: "16%",
        // },
        // {
        //   month: 1,
        //   money: 1789.0,
        //   moneybi: "10%",
        //   count: 200,
        //   countbi: "16%",
        // },
      ],
    };
  },
  methods: {
    async getList() {
      // this.loading = true;
      // if (this.names === "kanchayuan") {
      //   this.authority_id = 4;
      // } else {
      //   this.authority_id = 3;
      // }
      // this.authority_id = this.formLabelAlign.authority_id;
      // this.authority_id = "3,4";
      let res = await getAssetOverview(this.token);
      if (res.data.status) {
        this.salesData.todaySum = res.data.data.day.order_amount;
        this.salesData.todayCount = res.data.data.day.count;
        this.salesData.monthSum = res.data.data.mothon.order_amount;
        this.salesData.monthCount = res.data.data.mothon.count;
        this.salesData.yearSum = res.data.data.year.order_amount;
        this.salesData.yearCount = res.data.data.year.count;
        this.tableData = res.data.data.mothon_time;
        // console.log(this.tableData);
        // this.tableData = res.data.data.data || [];
        // this.total = res.data.data.count;
        // console.log(this.tableData.list, "55555");
        // let timer = setTimeout(() => {
        //   this.loading = false;
        //   clearTimeout(timer);
        // }, 400);
      } else {
        if (res.data.msg == "token失效,请重新进行登录") {
          this.$router.push("/login");
        }
        if (res.data.msg == "此账号没有权限") {
          this.$message.error(res.data.msg);
          this.loading = false;
        }
        let timer = setTimeout(() => {
          this.$message.error(res.data.msg);
        }, 5000);
      }
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style scoped>
.saleBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 270px;
  /* border: 1px solid black; */
  margin-bottom: 15px;
}
.money {
  font-size: 32px;
  color: rgba(249, 100, 34, 1);
  /* font-weight: 700; */
}
.title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}
.yuan {
  font-size: 18px;
  font-weight: normal;
}
.up,
.down {
  display: flex;
  justify-content: space-around;
}
.up div,
.down div {
  width: 28%;
  height: 120px;
  padding: 10px;
  padding-left: 32px;
  box-sizing: border-box;
  border: 1px solid rgba(102, 102, 102, 0.25);
  border-radius: 8px;
  /* background-color: rgb(239, 240, 240); */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.one {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  /* border: 1px solid black; */
  flex-wrap: wrap;
}
.month {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 30%;
  border: 1px solid rgba(102, 102, 102, 0.25);
  margin-bottom: 10px;
  border-radius: 8px;
}
.month div {
  width: 30%;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  /* border: 1px solid red; */
}
.month .leftBox {
  width: 70px;
  height: 70px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  line-height: 70px;
  border-radius: 50%;
  /* background-color: rgb(239, 240, 240); */
}
.month .counts {
  font-size: 24px;
  /* font-weight: 700; */
  color: rgba(249, 100, 34, 1);
}
.month p {
  font-size: 16px;
}
</style>
